<script setup lang="ts">
import type { AlarmQuotaModel, ConfModel } from '@/apis/model/conf'
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import { getConfApi, updateConfApi } from '@/apis/modules/conf'

import { Message } from '@arco-design/web-vue'
import { get, set } from 'lodash-es'

const loading = ref<boolean>(false)
const formRef = ref<FormInstance>()

const formState = reactive<AlarmQuotaModel & Record<string, any>>({})
const REPORT_COUNT_FIELD_COMMON = {
  label: '连续上报',
  suffix: '次',
  inputAttrs: { max: 99, min: 1 },
}
export interface ConfGroupChildItem {
  field: string
  label: string
  suffix: string
  inputAttrs: {
    max: number
    min: number
    defaultValue?: number
  }
}
export interface ConfGroupChild {
  field: string
  label: string
  items: ConfGroupChildItem[]
}
export interface ConfGroup {
  group: string
  tooltip?: string
  items: ConfGroupChild[]
}

const configs: ConfGroup[] = [
  {
    group: '计算节点资源分配',
    tooltip: '分配率 = 已分配虚拟资源数量 / 真实资源数量\n可配置范围：50-2000%',
    items: [
      {
        field: 'calculation_node_cpu.status',
        label: 'CPU分配过高',
        items: [
          {
            field: 'calculation_node_cpu.use_size',
            label: 'CPU分配率 ≥',
            suffix: '%',
            inputAttrs: { max: 2000, min: 50 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'calculation_node_cpu.report_count',
          },
        ],
      },
      {
        field: 'calculation_node_mem.status',
        label: '内存分配过高',
        items: [
          {
            field: 'calculation_node_mem.use_size',
            label: '内存分配率 ≥',
            suffix: '%',
            inputAttrs: { max: 2000, min: 50 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'calculation_node_mem.report_count',
          },
        ],
      },
    ],
  },
  {
    group: '区域库存/资源分配',
    tooltip: '分配率 = 已分配虚拟资源数量 / 真实资源数量\n可配置范围：50-2000%',
    items: [
      {
        field: 'region_bare_metal.status',
        label: '裸金属',
        items: [
          {
            field: 'region_bare_metal.use_size',
            label: '裸金属剩余数 ≤',
            suffix: '台',
            inputAttrs: { max: 50, min: 0 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'region_bare_metal.report_count',
          },
        ],
      },
      {
        field: 'region_ip.status',
        label: 'IP地址',
        items: [
          {
            field: 'region_ip.use_size',
            label: 'IP剩余数 ≤',
            suffix: '个',
            inputAttrs: { max: 50, min: 0 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'region_ip.report_count',
            inputAttrs: { max: 99, min: 1 },
          },
        ],
      },
      {
        field: 'resource_cpu.status',
        label: 'CPU分配过高',
        items: [
          {
            field: 'resource_cpu.use_size',
            label: 'CPU分配率 ≥',
            suffix: '%',
            inputAttrs: { max: 2000, min: 50 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'resource_cpu.report_count',
          },
        ],
      },
      {
        field: 'resource_mem.status',
        label: '内存分配过高',
        items: [
          {
            field: 'resource_mem.use_size',
            label: '内存分配率 ≥',
            suffix: '%',
            inputAttrs: { max: 2000, min: 50 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'resource_mem.report_count',
          },
        ],
      },
      {
        field: 'resource_disk_assign.status',
        label: '存储分配过高',
        items: [
          {
            field: 'resource_disk_assign.use_size',
            label: '存储分配率 ≥',
            suffix: '%',
            inputAttrs: { max: 2000, min: 50 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'resource_disk_assign.report_count',
          },
        ],
      },
      {
        field: 'resource_disk.status',
        label: '存储空间过低',
        items: [
          {
            field: 'resource_disk.use_size',
            label: '存储可用空间 ≤',
            suffix: '%',
            inputAttrs: { max: 50, min: 0 },
          },
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'resource_disk.report_count',
          },
        ],
      },
    ],
  },
  {
    group: '异常状态',
    items: [
      {
        field: 'cluster.status',
        label: '集群状态异常',
        items: [
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'cluster.report_count',
          },
        ],
      },
      {
        field: 'node.status',
        label: '节点状态异常',
        items: [
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'node.report_count',
          },
        ],
      },
      {
        field: 'middleware.status',
        label: '中间件状态异常',
        items: [
          {
            ...REPORT_COUNT_FIELD_COMMON,
            field: 'middleware.report_count',
          },
        ],
      },
    ],
  },
]
const btnLoading = ref<boolean>(false)
const MODULE_TYPE = 4

const rules: Record<keyof typeof formState, FieldRule[]> = {
  cny: [{ required: true, message: '请输入金额' }],
  usdc: [{ required: true, message: '请输入金额' }],
  usdt: [{ required: true, message: '请输入金额' }],
}

function handleSubmitSuccess() {
  btnLoading.value = true
  updateConfApi({ type: MODULE_TYPE, alarm_quota: formState })
    .then(() => {
      Message.success('保存成功')
    })
    .finally(() => {
      btnLoading.value = false
    })
}

function getConfigInfo() {
  loading.value = true
  getConfApi({ type: MODULE_TYPE })
    .then((res: ConfModel) => {
      Object.assign(formState, res.alarm_quota)
    })
    .finally(() => {
      loading.value = false
    })
}
onMounted(() => {
  getConfigInfo()
})
</script>

<template>
  <main-container
    :loading="loading"
    :pagination="false"
  >
    <div class="text-xs text-color-2">
      关闭后，邮箱将不会收到对应的告警消息
    </div>
    <a-form
      ref="formRef"
      :model="formState"
      label-align="left"
      :label-col-style="{ width: '104px' }"
      :rules="rules"
      class="mt-6"
      @submit-success="handleSubmitSuccess"
    >
      <a-space
        direction="vertical"
        :size="24"
        class="mb-6"
      >
        <a-card
          v-for="(conf, i) in configs"
          :key="i"
          class="indicators-group__card"
          :title="conf.group"
        >
          <template
            v-if="conf?.tooltip"
            #title
          >
            <div class="flex items-center gap-x-1">
              <span class="text-xs font-700 leading-5 text-color-1">{{
                conf.group
              }}</span>
              <a-tooltip>
                <i-icons-question
                  class="h-14px w-14px cursor-pointer text-color-3 hover:text-color-1"
                />
                <template #content>
                  <div class="whitespace-pre-wrap">
                    {{ conf.tooltip }}
                  </div>
                </template>
              </a-tooltip>
            </div>
          </template>
          <div class="grid grid-cols-3 w-[752px] gap-4">
            <div
              v-for="col in conf.items"
              :key="col.field"
              class="w-[240px] flex flex-col gap-y-2 border border-1 rounded-lg p-4"
            >
              <div class="flex items-center h-30px!">
                <a-checkbox
                  :model-value="get(formState, col.field) === 1"
                  @update:model-value="
                    (v: number) => set(formState, col.field, v ? 1 : 2)
                  "
                >
                  {{ col.label }}
                </a-checkbox>
              </div>
              <a-divider
                type="dashed"
                class="!my-1"
              />
              <div
                v-for="item in col.items"
                :key="item.field"
              >
                <a-form-item
                  :label="item.label"
                  class="mb-0!"
                  hide-asterisk
                >
                  <cloud-input-number
                    :model-value="get(formState, item.field)"
                    v-bind="item.inputAttrs || {}"
                    @update:model-value="
                      (v: number) => set(formState, item.field, v)
                    "
                  >
                    <template #append>
                      {{ item.suffix }}
                    </template>
                  </cloud-input-number>
                </a-form-item>
              </div>
            </div>
          </div>
        </a-card>
      </a-space>
      <a-form-item
        hide-label
        class="submit-btn-form mb-0!"
      >
        <a-button
          type="primary"
          html-type="submit"
          :loading="btnLoading"
          class="w-18"
        >
          保存
        </a-button>
      </a-form-item>
    </a-form>
  </main-container>
</template>

<style scoped lang="less">
:deep(.arco-space-item-split) {
  @apply mb-0!;
}
.indicators-group__card {
  @apply bg-transparent! border-none! select-none!;
  & + .indicators-group__card {
    border-top: 1px dashed var(--color-border-3);
  }
  :deep(.arco-card-header) {
    @apply py-6! h-5;
    &-title {
      @apply text-xs font-700 text-color-1 leading-5;
    }
  }
  :deep(.arco-card-header),
  :deep(.arco-card-body) {
    @apply border-none p-0!;
    .arco-checkbox {
      @apply pl-0!;
    }
  }
  :deep(.arco-card-body) {
    @apply mt-4;
  }
  :deep(.arco-form-item-label-col) {
    @apply w-[104px]! whitespace-nowrap! flex-basis-auto;
  }
  :deep(.arco-form-item-wrapper-col) {
    @apply flex-1 w-auto;
  }
}
:deep(.arco-form-item) {
  align-items: center;
  .arco-form-item-label {
    color: var(--color-text-2) !important;
  }
}
.arco-checkbox {
  font-size: 12px;
  width: 100%;
  flex-direction: row-reverse;
  justify-content: space-between;
  :deep(.arco-checkbox-label) {
    margin-left: 0;
  }
  :deep(.arco-checkbox-icon) {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }
}
</style>
